<template>
  <div class="ChartsData">
       <el-tabs type="border-card" v-model="tabPosition">
            <el-tab-pane label="拆线图" name="line">
                 <Charts :chartData="chartData" chartType="line" ></Charts>
            </el-tab-pane>
             <el-tab-pane label="柱状图" name="bar">
                 <Charts :chartData="chartData" chartType="bar"></Charts>
            </el-tab-pane>
             <el-tab-pane label="饼图" name="pie">
                 <Charts :chartData="chartData" chartType="pie"></Charts>
            </el-tab-pane>
       </el-tabs>
  </div>
</template>

<script lang='ts'>
//是一个装饰器功能
import { Component, Vue, Prop, Provide } from "vue-property-decorator";
// @ is an alias to /src
import Charts from '@/components/Charts.vue'

@Component({
  components:{
     Charts
  },
})
export default class ChartsData extends Vue{
  @Provide() tabPosition:string="line";
  @Provide() chartType:string="";
  @Provide() chartData:any={
     xAxisData:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
     yAxisData:[820, 932, 901, 934, 1290, 1330, 1320]
  }
}
</script>
